<script setup>
//引入封装之后的axios网络请求
import {fetch24HourData} from '../api/weatherAPI'
import {initBaseLineEcharts} from '../util/echarts'
import { ref, watch } from 'vue'
//引入day.js库
import dayjs from 'dayjs';
//
const hour24 = ref([])
var chartDom = ref(null)
//引入状态管理
import {useCityStore} from '../stores/cityStore'
const cityStore = useCityStore("")//响应式数据
const hour24FxTime = ref([])//存放未来24小时的预报时间
const hour24Temp = ref([])//存放未来24小时的温度
const updateTime = ref('')//天气更新时间
watch(
  //数据源
  ()=>cityStore.location,
  ()=>{
    //当侦听到数据源(location)发生变化时，应该重新发起网络请求
    getData(cityStore.location.id)
  },
  //及时回调，数据源没有改变的初始状态下执行回调函数一次
  {immediate : true}
)

//调用网络请求的函数
// getData(cityStore.location.id)

//封装axios之后的网络请求函数
async function getData(locationID){
  const res = await fetch24HourData (locationID)
  // console.log(res)
  //把接口中的未来24小时数据存放到hour24中
  updateTime.value = dayjs(res.updateTime).format('YYYY年MM月DD日 HH时mm分')
    hour24.value = res.hourly
    //每次发起请求时把未来24小时的时间和温度初始化为空
    hour24FxTime.value = []
    hour24Temp.value = []
    //给未来24小时时间和温度的数组添加内容
    hour24.value.forEach((element) => {
      hour24FxTime.value.push(element.fxTime)
      hour24Temp.value.push(element.temp)
    })
    initBaseLineEcharts(
      chartDom.value,
      hour24FxTime.value.map((element) => dayjs(element).format('HH')),
      hour24Temp.value
    );
}

</script>

<template>
  <main>
    <!-- {{ hour24 }} -->
    <h1>未来24小时天气预报</h1>
    <div>
      <span>最后更新时间：{{ updateTime }}</span>
    </div>
    <!-- <ul>
      <li v-for="(item,index) in hour24" :key="index">
        {{ index }} <span>——预报时间: </span> {{ item.fxTime }} <span>, 温度:</span>{{ item.temp }}
      </li>
    </ul> -->
    <div id="main" ref="chartDom"></div>
  </main>
</template>

<style scoped>
#main{
  width: 100%;
  height: 400px;
}
</style>